<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mixFold</title>
    <style type="text/css">
        html {
            font-family: sans-serif;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        div {
            display: block;
        }

        .section {

            min-width: 1226px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #000;
            color: #fff;

        }

        body {
            background-color: black;
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
        }

        .hu-title {
            font-size: .65rem;
            color: #fff;
            font-family: MILanPro_MEDIUM--GB1-4;
            line-height: .95rem;
            margin-bottom: 0.75rem;
        }

        .sen1 {
            font-size: 30px;
            color: #fff;
            font-family: 宋体4;
            line-height: 50px;
            margin-bottom: 20px;
        }

        .section-1 {

            width: auto;
            height: 900px;
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/top-banner.png);
            background-repeat: no-repeat;
            background-position: top;
            background-size: contain;
            position: relative;

        }

        .sub-title {
            margin-bottom: 0.25rem;
            font-size: 30px;
            color: #fff;
            font-family: 新宋体;

        }

        .sub-tip {
            font-size: 20px;
            color: #ddbb7f;
            font-family: 新宋体;

        }


        .ctx {
            text-align: left;
            padding: 160px 158px;

        }

        .top-title {
            width: auto;
            height: 50px;
            margin-bottom: 0.41rem;
        }

        .section-2 {
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .jiesuo {
            width: auto;
            height: 500px;
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/s7.png);
            background-repeat: no-repeat;
            background-position: top;
            background-size: 1500px 1500px;
            background-position: right 1.51rem;
            position: relative;

        }

        .intro {
            text-align: left;
            position: absolute;
            top: 5.26rem;
            left: 5.42rem;
        }

        .pic {
            width: auto;
            height: 1500px;
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/s8.jpg);
            background-repeat: no-repeat;
            position: relative;
            background-size: 100%;
            background-position: bottom;
        }

    </style>
</head>
<body>
<%@ include file="header.jsp" %>
<div class="mi-mixfold">


    <div class="section mixfold">
        <div class="section-1">
            <div class="ctx">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/top-title.png" alt
                     class="top-title">
                <div class="sub-title">小米折叠屏手机虎年礼盒</div>
                <div class="sub-tip">如虎添翼，展开惊喜</div>
            </div>

        </div>

    </div>


    <div class="section xiaomi3pro">
        <div class="section-2">
            <div class="hu-title">
                <span class="sen1">" 展开大屏，如虎添翼 "<br></span>
                <span class="sen1">" 虎年礼盒 "<br></span>
                <span class="sen1">" 开启2022好运 "<br></span>
            </div>
            <div class="hu-img">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/hu-device.png">
            </div>
        </div>
    </div>

    <div class="section video">
        <video data-v-33f25cce="" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/s4_v.mp4" poster=""
               autoplay="autoplay" muted="muted" loop="loop" style="width: 100%; height: 100%;" draggable="true">
        </video>
    </div>


    <div class="section jiesuo">
        <div class="intro">
            <div class="title" style="font-size: 45px; font-weight: 500; margin-bottom: 0.6rem;">
                折叠时<br>
                是一台握感极佳的手机<br>
                单手掌控 轻松解锁
            </div>
            <div class="desc" style="font-size: 15px; font-weight: 400;">
                6.52 英寸的外屏，纤细干练的造型，搭配符合人体工学<br>
                设计的侧面弧形指纹和整机尺寸，比普通手机更具操作感，<br>
                应用解锁一手掌控。
            </div>
        </div>
    </div>

    <br>


    <div class="section video">
        <video data-v-33f25cce="" src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mixfold/s23.mp4" poster=""
               autoplay="autoplay" muted="muted" loop="loop" style="width: 100%; height: 100%;" draggable="true">
        </video>
    </div>


    <div class="section pic">
        <div class="intro">
            <div class="title" style="font-size: 35px; font-weight: 500; margin-bottom: 0.6rem;">
                展开时<br>8.01 英寸 2K+ 真全面折叠屏<br>
                你将展开更大视野
            </div>
            <div class="desc" style="font-size: 15px; font-weight: 400;">
                是一块 8.01 英寸AMOLED 2K+ 超大屏，也是一块完整无遗憾的真全面屏。<br>
                它纤薄又精致，拥有极高的韧性，你一次次的展开它，就是将超大视野的操作空间无限扩展。
            </div>
        </div>
    </div>

</div>

<%@ include file="footer.jsp" %>
</body>
</html>
